<template>
    <div class="login_container">
        <div class="login_box">
            <div class="avatar_box">
                <img src="@/assets/img/person.png" />
            </div>
            <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="60px"
                class="login_form"
            >
                <el-form-item label="账号" prop="userName">
                    <el-input
                        type="text"
                        v-model="ruleForm.userName"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <el-form-item label="密码" prop="passWord">
                    <el-input
                        type="password"
                        v-model="ruleForm.passWord"
                        autocomplete="off"
                        clearable
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item>
                    <slider
                        ref="slider"
                        class="hua_block"
                        status="status"
                        :errorFun="submitError"
                    />
                </el-form-item> -->
            </el-form>
            <div class="btn_box">
                <el-button size="small" type="primary" @click="submit"
                    >立即登录</el-button
                >
            </div>
        </div>
    </div>
</template>

<script>
import { login } from '@/api/task'
import slider from '@/components/slider/index'
export default {
    data() {
        return {
            ruleForm: {
                userName: '',
                passWord: ''
            },
            rules: {
                userName: [
                    {
                        required: true,
                        message: '请输入账号',
                        trigger: 'change'
                    }
                ],
                passWord: [
                    {
                        required: true,
                        message: '请输入密码',
                        trigger: 'change'
                    }
                ]
            }
        }
    },
    components: {
        slider
    },
    methods: {
        submit() {
            console.log(this.$refs.slider)
            this.$refs['ruleForm'].validate(valid => {
                if (valid) {
                    // if (!this.$refs.slider.rangeStatus) {
                    //     return this.$Message({
                    //         text: '请拖动滑块在进行登录',
                    //         type: 'warning'
                    //     })
                    // }
                    login(this.ruleForm).then(res => {
                        if (res.code == 200) {
                            window.localStorage.setItem('token', res.token)
                            this.$router.push({
                                path: '/upgradeIndex'
                            })
                        }
                    })
                } else {
                    console.log('error submit!!')
                    return false
                }
            })
        },
        submitError() {
            console.log('错误')
        }
    }
}
</script>

<style lang="scss" scoped>
.login_container {
    height: 100%;
    background: url('~@/assets/img/pageBg.png') no-repeat center center;
    .login_box {
        width: 400px;
        height: 260px;
        background-color: #fff;
        border-radius: 4px;
        position: absolute;
        left: 50%;
        top: 40%;
        -webkit-transform: translate(-50%, -50%);
        transform: translate(-50%, -50%);
        .avatar_box {
            height: 128px;
            width: 128px;
            border: 1px solid #eee;
            border-radius: 50%;
            padding: 5px;
            -webkit-box-shadow: 0 0 10px #ddd;
            box-shadow: 0 0 10px #ddd;
            position: absolute;
            left: 50%;
            -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
            background-color: #fff;
            img {
                width: 100%;
                height: 100%;
                border-radius: 50%;
                background-color: #fff;
            }
        }
        .login_form {
            position: absolute;
            bottom: 40px;
            width: 100%;
            padding: 0 20px;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
            ::v-deep .el-form-item .el-input__validateIcon {
                color: rgb(15, 206, 15);
            }
            ::v-deep .el-form-item.is-error .el-input__validateIcon {
                color: #f56c6c !important;
            }
        }
        .btn_box {
            position: absolute;
            bottom: 15px;
            left: 50%;
            -webkit-transform: translate(-50%);
            transform: translate(-50%);
            .hua_block {
                margin-bottom: 10px;
                padding: 0 20px;
                width: 100%;
            }
        }
    }
}
</style>
